<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23 - 获取值</title>
    <style>
        body {
            height: 3000px;
        }
        /* css中盒子大小计算 
            div的宽度是: 200 + 40  + 20
            div的高度是: 200 + 40  + 20
            如果盒子没有内边距,外边框 , 盒子大小 = 内容区域的大小
            如果盒子有内边距,外边框,  盒子大小 = 内容 + 内边距 + 外边框
        */
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            border: 10px solid skyblue;
        }

        .ary{
            width: 200px;
            height: 200px;
            background-color: red;
            border-top: 10px solid blue;
            border-bottom: 13px solid pink;
            border-left: 15px solid green;
            border-right: 8px solid orange;
        }

        .box1 {
            position: relative;
            width: 400px;
            height: 400px;
            border: 5px solid blue;
            background-color: red;
            margin-left: 200px;
            margin-top: 200px;
        }
        .box2 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: orange;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <div class="ary"></div>

    <div class="box1">
        <div class="box2"></div>
    </div>

    <script>

        // A. 获取滚动的距离
        // 语法:
        // ☛   document.documentElement.scrollTop

        // 代码演示:
        window.addEventListener('scroll', function(){
            // 获取滚动的距离
            console.log(document.documentElement.scrollTop);
        });





        // B. 获取元素大小
        // 语法1:
        // ☛   标签对象.offsetWidth || 标签对象.offsetHeight   (用来获取盒子实际大小,和 css 的计算方式一样)
        
        // 代码演示:
        let box = document.querySelector('.box');
        console.log(box.offsetWidth);
        console.log(box.offsetHeight);

        // 语法2:
        // ☛   标签对象.clientWidth || 标签对象.clientHeight   (用来获取当前盒子大小 = 内容 + 内边距)
        
        // 代码演示:
        console.log(box.clientWidth);
        console.log(box.clientHeight);





        // C. 获取盒子边框大小
        // 语法:
        // ☛   标签对象.clientLeft       获取当前盒子左边框大小
        // ☛   标签对象.clientTop        获取当前盒子上边框大小

        // 代码演示:
        let ary = document.querySelector('.ary');
        console.log(ary.clientLeft); 
        console.log(ary.clientTop);  

        // 获取盒子边框大小,js只提供了 获取左边框  和 上边框的方式, 其他没有提供
        // 如果希望获取其他边框,则可以通过计算实现:
        // 语法:
        // ☛   标签对象.offsetWidth (内容  +  内边距 + 外边框)
        // ☛   标签对象.clientWidth (内容 + 内边距)
        // ☛   标签对象.offsetWidth - 标签对象.clientWidth = 边框的和

        // ☛   右边框 =  标签对象.offsetWidth -  标签对象.clientWidth -  标签对象.clientLeft; 
        // ☛   下边框 = 标签对象.offsetHeight - 标签对象.clientHeight - 标签对象.clientTop;






        // D. 获取元素位置
        // 语法:
        // ☛    标签对象.offsetTop   
        // ☛    标签对象.offsetLeft

        // 代码演示:
        let box2 = document.querySelector('.box2');
        console.log(box2.offsetTop);
        console.log(box2.offsetLeft);
        // 获取的标签相对整个页面的位置 (没有定位)
        
         

    </script>
</body>
</html>